<template>
	<div class="map">
		<van-swipe :autoplay="3000">
			<van-swipe-item v-for="(image, index) in images" :key="index">
				<img style="width: 100%;height: 50vw;" :src="image" />
			</van-swipe-item>
		</van-swipe>
		<FieldPopupCascader 
			:field="gsy_ex100"
			@update:field="gsy_ex100Change"
			name="gsy_ex100" 
			label="墓区" 
			:options="columns1" 
			confirmType="selectedOptions"
			:readonly="false" 
		/>
		<FieldPopupPicker 
			v-if="gsy_ex100"
			:field="gsy_mainid"
			@update:field="gsy_mainidChange"
			:required="true"
			name="gsy_mainid" 
			label="墓穴编号" 
			:columns="columns2" 
			confirmType="selectedOptions"
			:readonly="false" 
		/>
		<van-search 
			v-model="formData.gcb_name" 
			placeholder="请输入使用人姓名" 
			@search="onSearch"
		/>
		<van-search 
			v-model="formData.c_nam" 
			placeholder="请输入认购人姓名" 
			@search="onSearch"
		/>
		<van-button type="primary" block size="small" @click="onSearch">搜索纪念馆</van-button>

		
		
		<PullRefreshList v-model:refreshing="refreshing" v-model:loading="loading" v-model:finished="finished" v-model:list="list" @load="onLoad">
			<div v-for="(item,index) in list" :key="index" class="content">
				<div class="img">
					<img :src="item.gm_ex27?.split(',')[0]" >
					<!-- <img :src="item.img" > -->
					<!-- <div v-html="item.imgurl"></div> -->
				</div>
				<div class="font">
					<div>{{item.address}}</div>
					<div>使用人姓名：{{ item.gcb_name }}</div>
					<div>认购人姓名：{{ getDesensitizeNameStr(item.c_nam) }}</div>
					<div>身份证：{{ getDesensitizeIdCardStr(item.c_ex13) }}</div>
					<div>墓位编号：{{ item.gm_ex6 }}</div>
					<div>
						<van-button type="primary" size="small" style="margin-right: 1vw" @click.stop="$router.push(`/cloudSacrificePersonalHall?th_id=${item.gm_id}`)">进入纪念馆</van-button>
						<!-- <van-button type="primary" size="small" @click.stop="showP(item)">云纪念二维码</van-button> -->
					</div>
				</div>
			</div>
		</PullRefreshList>
		<van-popup v-model:show="showPopup1" :style="{ padding: '5vw' }">
			<div v-html="imgUrl"></div>
		</van-popup>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive, markRaw, onBeforeMount } from 'vue'
	import type { Ref, Raw } from 'vue'
	import { showDialog, showLoadingToast, closeToast, showFailToast } from 'vant'
    import { useRouter, useRoute } from 'vue-router'
    import { useStore } from '@/store'
	import PullRefreshList from '@/components/PullRefreshList.vue'
import { log } from 'console'
    import { createHallApi, getAareaApi, getCemeteryApi } from '@/apis'
	import { getDesensitizeNameStr, getDesensitizeIdCardStr } from '@/utils/utils'
    import FieldPopupPicker from '@/components/FieldPopupPicker.vue'
    import FieldPopupCascader from '@/components/FieldPopupCascader.vue'

	const columns1: Ref<{
        text: string;
        value: string;
    }[]> = ref([
        // { text: '墓穴1', value: '墓穴1' },
        // { text: '墓穴2', value: '墓穴2' },
    ])
    const columns2: Ref<{
        text: string;
        value: string;
    }[]> = ref([
        // { text: '编号1', value: '编号1' },
        // { text: '编号2', value: '编号2' },
    ])
	onBeforeMount(async () => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        });
        getAareaApi({
            iszj: 'N',
            time: new Date().getTime().toString(),
            company: '海陵区凤栖园智慧墓园系统'
        }).then(res => {
			let forFun = (arr2) => {
				arr2.forEach((item, index) => {
					item.value = item.id
					item.text = item.text
					if (item.child.length > 0) {
						item.children = item.child
						forFun(item.children)
					}
				})
			}
			forFun(res[0].child)
            columns1.value = res[0].child
        }).finally(() => {
            closeToast();
        })
    })
	const gsy_ex100Change = (val) => {
		gsy_ex100.value = ''
		val.forEach((item, index) => {
			if (val.length == (index+1)) {
				gsy_ex100.value += item.text
				formData.value.gsy_ex100 = item.value
			} else {
				gsy_ex100.value += item.text + '/'
			}
		})
        formData.value.gsy_mainid = ''
        gsy_mainid.value = ''

        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        });
        columns2.value = []
        getCemeteryApi({
            areaId: formData.value.gsy_ex100,
            company: '海陵区凤栖园智慧墓园系统'
        }).then(res => {
            res.data[0]?.child.forEach((item, index) => {
                item.text = item.gm_ex6
                item.value = item.gm_id
            })
            columns2.value = res.data[0].child
        }).finally(() => {
            closeToast();
        })
    }
    const gsy_mainidChange = (val) => {
        gsy_mainid.value = val.text
        formData.value.gsy_mainid = val.value
    }
	const gsy_ex100: Ref<string> = ref('')
    const gsy_mainid: Ref<string> = ref('')
	const formData = ref({
        gsy_ex100: '',
        gsy_mainid: '',
		gcb_name: '',
		c_nam: '',
    })
	const route = useRoute()
	const store = useStore()
	console.log(route.path)
	const images: Raw<any[]> = markRaw([new URL('@/assets/banner/gmjs_bg9.png', import.meta.url).href])
	const list: Ref<any[]> = ref([])
	const loading: Ref<boolean> = ref(false)
	const finished: Ref<boolean> = ref(false)
	const showPopup1: Ref<boolean> = ref(false)
	const refreshing: Ref<boolean> = ref(true)
	const imgUrl: Ref<string> = ref('')
	
	const onSearch = async () => {
		if (!formData.value.gcb_name && !formData.value.gsy_mainid && !formData.value.c_nam) {
			showDialog({
				title: '提示',
				message: '请输入使用人姓名,认购人姓名或者墓位编号！'
			})
		} else {
			showLoadingToast({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			})
			let val = await createHallApi({
				gcb_name: formData.value.gcb_name,
				c_nam: formData.value.c_nam,
				gm_id: formData.value.gsy_mainid,
			})
			closeToast()
			list.value = val
			if (list.value.length == 0) {
				showFailToast('暂无数据！')
			}
			console.log(list.value)
		}
	}

	const onLoad = async (callback) => {
		console.log(callback)
		// if (refreshing.value) {
		// 	list.value = [];
		// 	refreshing.value = false;
		// }
		if (formData.value.gcb_name || formData.value.gsy_mainid || formData.value.c_nam) {
			let val = await createHallApi({
				c_nam: formData.value.c_nam,
				gm_id: formData.value.gsy_mainid,
				gcb_name: formData.value.gcb_name,
			})
			list.value.push(...val)
		}
		
        callback(true)
	}
	const showP = (val) => {
		showPopup1.value = true
		imgUrl.value = val.imgurl
	}
	
    
</script>

<style lang="scss" scoped>
	.map{
		width: 100vw;
		height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
	}
    :deep(.van-pull-refresh) {
        overflow: scroll;
        flex: 1;
    }
	.content{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 40vw;
	}
	.content > .img{
		width: 30vw;
		height: 30vw;
	}
	.content > .img img{
		width: 100%;
		height: 100%;
	}
	.content > .font{
		width: 60vw;
		// height: 38vw;
		height: 34vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.content > .font > div{
		overflow:hidden;
		/* white-space: nowrap;
		text-overflow: ellipsis; */
		color: #212121;
        text-align: left;
	}
	.content > .font > div:first-child{
		font-weight: bold;
		color: #181818;
	}
	
</style>
